<template>
    <div class="page-account">
        <!--<van-nav-bar left-arrow @click-left="$router.back(-1)" title="My Account" style="color:#fff;">-->
            <!--<van-icon name="like-o" slot="right" />-->
            <!--<van-icon name="chat" slot="right" />-->
        <!--</van-nav-bar>-->
        <div class="account-head">
            <div :style="backgroundImage" class="head-img">
                <div class="head-img-inbox" @click="$router.push('/user/profile')">
                    <img :src="headerImage" :onerror="defaultHeadImg"/>
                </div>
            </div>
            <div class="head-info">
                <van-button type="default" size="small" class="edit" @click="$router.push('/user/profile')" v-show="userId != null">{{$t('m.Edit')}}</van-button>
                <div class="info-name">{{translateString(username)}}</div>
                <div class="face-icon-box confirmed" v-if="account || facebookId">
                    <span>{{$t('m.Confirmed')}}</span>
                    <span class="confirmed-img">
                            <span class="bindphone" style="margin-right: 5px" v-if="account">
                                <img src="../../static/img/images/bindphone.png" />
                            </span>
                        <span class="bindfacebook" style="margin-right: 5px" v-if="facebookId">
                                <img src="../../static/img/images/bindfacebook.png" />
                            </span>
                    </span>
                </div>
                <!-- 评价 -->
                <!--<div class="face-icon-box">-->
                        <!--<span class="face-icon">-->
                            <!--<img src="../../static/img/images/meh.png" />-->
                            <!--18-->
                        <!--</span>-->
                    <!--<span class="face-icon">-->
                            <!--<img src="../../static/img/images/smile.png" />-->
                            <!--18-->
                        <!--</span>-->
                    <!--<span class="face-icon">-->
                            <!--<img src="../../static/img/images/frown.png" />-->
                            <!--18-->
                        <!--</span>-->
                <!--</div>-->
                <div class="join-info" v-if="createTime">
                    <span>{{$t('m.Joined')}}</span> <span>{{getJoinDate(createTime)}}</span>
                </div>
            </div>
        </div>
        <!--<div class="user-info-box">
                <span class="user-info" @click="$router.push('/login-register/loginregister')">
                    <i class="i-icon1">
                        <img src="" :onerror="defaultHeadImg"/>
                    </i>
                    <p class="title">{{$t('m.Login')}}/{{$t('m.Register')}}</p>
                    <div class="face-icon-box">
                        <span class="face-icon">
                            <img src="../../static/img/images/meh.png" />
                            18
                        </span>
                        <span class="face-icon">
                            <img src="../../static/img/images/smile.png" />
                            18
                        </span>
                        <span class="face-icon">
                            <img src="../../static/img/images/frown.png" />
                            18
                        </span>
                    </div>
                </span>
        </div>-->
        <div class="follow-size" v-show="userId != null">
            <div class="follow-size-item" @click="goToFollow(1)">
                <div class="item-title">{{followers}}</div>
                <div>{{$t('m.Followers')}}</div>
            </div>
            <div class="follow-size-item" @click="goToFollow(2)">
                <div class="item-title">{{following}}</div>
                <div>{{$t('m.Following')}}</div>
            </div>
        </div>
        <div class="go-to-list">
            <div class="list-item" @click="$router.push('/user/myitems')"><img src="../../static/img/images/account-tag.png" class="list-icon" />{{$t('m.MyAds')}}</div>
            <!--<div class="list-item"><img src="../../static/img/images/account-car.png" class="list-icon" />My Purchases</div>-->
            <div class="list-item" @click="$router.push('/user/favourites')"><img src="../../static/img/images/account-fav.png" class="list-icon" />{{$t('m.Favourites')}}</div>
            <div class="list-item" @click="$router.push('/help/help')"><img src="../../static/img/images/account-ques.png" class="list-icon" />{{$t('m.Help')}}</div>
            <div class="list-item" @click="$router.push('/user/contact')"><img src="../../static/img/images/account-phone.png" class="list-icon" />{{$t('m.Contactus')}}</div>
            <div class="list-item" @click="$router.push('/language')"><img src="../../static/img/images/language.png" class="list-icon" />{{$t('m.Language')}}</div>
            <!--<div class="list-item" @click="$router.push('/user/settings')"><img src="../../static/img/images/account-setting.png" class="list-icon" />Settings</div>-->
        </div>
        <div style="padding: 40px;"></div>
        <footer-bar ref="footer" footerBar="user"></footer-bar>
    </div>
</template>
<script>
    import { getUserInfo } from '../../static/api/mgc_api'
    import FooterBar from '@/components/FooterBar'
    export default {
        name: 'myAccount',
        middleware: ['login'],
        components: {
            FooterBar
        },
        data() {
            return {
                // activeNames: ['1'],
                defaultHeadImg: 'this.src="' + require('../../static/img/images/user-head.png') + '"',
                backgroundImage: {
                    backgroundImage: "url(" + require("../../static/img/images/account-head-backround.jpg") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "100% 100%",
                },
                headerImage: '',
                username: '',
                userId: null,
                account: '',
                facebookId: '',
                createTime: '',
                followers: '0',
                following: '0',
            };
        },
        methods: {
            regexNum (v,len,split) {
                split = split || ',', len = Math.abs((+len) % 20 || 2)
                v = parseFloat((v + '').replace(/[^\d\.-]/g, '')).toFixed(len) + ''
                v = parseFloat(v) + ''
                return v.replace(/\d+/, function (v) {
                        var lit = v.length % 3 == 0
                        var index = lit ? v.length - 3 : -1
                        return v.split('').reverse().join('').replace(/\d{3}/g, function (k, l) {
                            return k + ((l == index && lit) ? '' : split)
                        }).split('').reverse().join('')
                    }
                )
            },
            translateString(str) {
                if (!str) return ''
                return this.$translateLang(str, 'unicodeTozawgyi');
            },
            getJoinDate (value) {
                if(!value){
                    return ''
                }
                let ts = ''
                let date = new Date(value)
                let Y = date.getFullYear()
                let m = date.getMonth() + 1
                if (m < 10) {
                    m = '0' + m
                }
                return ts = m + '/' + Y
            },
            initInfo () {
                this.loading = true
                getUserInfo().then((res) => {
                    if (res.data) {
                        if (res.data.errorID === 0) {
                            let userInfo = res.data.object
                            this.initInfoData(userInfo)
                            this.setNewLocalUserInfo(userInfo)
                            this.loading = false
                        } else if (res.data.errorID === 100004) {
                            this.$router.push('/login-register/loginregister')
                        } else {
                            this.$toast(res.data.message)
                            this.loading = false
                        }
                    }
                })
                    .catch((error) => {
                        console.log(error)
                        this.$toast('error,please try again leter')
                        this.loading = false
                    })
            },
            initInfoData (userInfo) {
                if (!userInfo) return false;
                this.userId = userInfo.id // 判定用
                this.headerImage = userInfo.photo
                this.username = userInfo.name || ''
                this.account = userInfo.account
                this.facebookId = userInfo.facebookId
                this.createTime = userInfo.createTime
                if (userInfo.followDetail) {
                    this.followers = userInfo.followDetail.followedCount || '0';
                    this.following = userInfo.followDetail.followingCount || '0';
                }

            },
            // 保存用户信息
            setNewLocalUserInfo(i) {
                let _userInfo = JSON.stringify(i)
                localStorage.setItem("userInfo", _userInfo);
            },
            goToFollow(type) {
                // type: 1--followers; 2--following;
                if (type == 1) {
                    // f_type ----> 1: my-followers; 2: my-following; 3: other-followers; 4: other-following;
                    this.$router.push({
                        path: '/user/follow',
                        query: {
                            id: this.userId,
                            f_type: 1,
                        }
                    })
                } else if (type == 2) {
                    this.$router.push({
                        path: '/user/follow',
                        query: {
                            id: this.userId,
                            f_type: 2,
                        }
                    })
                }

            },
        },
        mounted() {
            let userInfo = localStorage.getItem("userInfo") || '';
            if (userInfo) {
                userInfo = JSON.parse(userInfo)
                this.initInfoData(userInfo)
                this.initInfo() // 请求接口保证数据最新
            } else {
                this.initInfo()
            }
        },
        beforeRouteLeave (to, from, next) {
            if (to.path == '/buydetail') {
                this.$router.push('/')
            } else {
                next()
            }
        }
    };
</script>
<style>
    .page-account .van-nav-bar{
        background-color: #FF9900;
    }
    .page-account .van-nav-bar .van-icon{
        color: #fff;
        margin-right: 15px;
        font-size: 18px;
    }
    .page-account .van-nav-bar .van-icon:last-child{
        margin-right: 4px;
    }
    .page-account .van-popup--left{
        height: 100%;
        width: 80%;
    }
    .page-account .edit.van-button--small{
        position: absolute;
        right: 4%;
        top: 6px;
    }
</style>
<style scoped>
    .user-info-box {
        padding: 15px 0 15px 15px;
        /*border-bottom: 1px solid #F2F2F2;*/

    }
    .user-info {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding-left: 4.1em;
        min-height: 50px;
        line-height: 150%;
        justify-content: space-around;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .user-info i{
        position: absolute;
        top: 50%;
        left: 0;
        display: inline-block;
        width: 50px;
        height: 50px;
        margin-top: -25px;
    }
    .user-info p.title{
        font-size: 14px;
        font-weight: 400;
        font-style: normal;
        text-decoration: none;
        padding: 0;
        margin: 0;
        text-align: left;
    }
    .user-info i img{
        width: 100%;
        display: block;
    }
    .face-icon-box {
        height: 24px;
        line-height: 24px;
        margin-top: 5px;
    }
    .face-icon-box img{
        display: inline-block;
        height: 100%;
        width:auto;
    }
    .face-icon {
        display:inline-flex;
        height:100%;
        margin-right: 15px;
    }
    .join-info{
        color: #6b6b6b;
        margin: 8px 0;
    }
    .follow-size{
        display: flex;
        padding:14px 0;
        border-top:1px solid #f2f2f2;
        /*border-bottom:1px solid #f2f2f2;*/
        margin-top:5px;
        font-size: 14px;
    }
    .follow-size-item{
        flex: 1;
        text-align: center;
        color:#83888f;
        border-right:1px solid #f2f2f2;
    }
    .follow-size-item:last-child{
        border-right:none;
    }
    .item-title{
        color:#2c3e50;
    }
    .head-img{
        height: 64px;
        position: relative;
    }
    .head-img-inbox{
        background: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        margin: -25px 0 0 -25px;
        overflow: hidden;
    }
    .head-img-inbox img{
        width: 100%;
        height: 100%;
        display: block;
    }
    .head-info{
        text-align: center;
        position: relative;
    }
    .head-info .info-name{
        padding: 13px 0 5px;
    }
    .head-info .confirmed{
        /*margin: 6px 0;*/
        color: #6b6b6b;
    }
    .head-info .confirmed .bindphone {
        background: #FF9900;
        border-radius: 50%;
        padding: 5px;
        box-sizing: padding-box;
        display:inline-flex;
        height: 14px;
        width: 14px;
        margin-right: 7px;
    }
    .head-info .confirmed .bindfacebook {
        background: #0E6C9C;
        border-radius: 50%;
        padding: 5px;
        box-sizing: padding-box;
        display:inline-flex;
        height: 14px;
        width: 14px;
        margin-right: 7px;
    }
    .confirmed-img{
        height: 100%;
    }
    .head-info .confirmed img {
        height: 14px;
    }
    .list-item{
        line-height: 48px;
        margin-left: 15%;
        color: #6b6b6b;
        border-bottom:1px solid #f2f2f2;
        position: relative;
    }
    .list-icon{
        position: absolute;
        top: 50%;
        left: -13%;
        width: 20px;
        height: 20px;
        margin: -10px 0 0 0;
    }
    .go-to-list{
        border-top: 1px solid #f2f2f2;
    }
    @media (max-width:375px) and (min-width:321px) {
        .head-img{
            height: 75px;
        }
        .head-img-inbox{
            width: 56px;
            height: 56px;
            margin: -28px 0 0 -28px;
        }
    }
    @media (max-width:1080px) and (min-width:376px) {
        .head-img{
            height: 83px;
        }
        .head-img-inbox{
            width: 62px;
            height: 62px;
            margin: -31px 0 0 -31px;
        }
    }
</style>
